<template>
    <public-title @change-v="changeV" @changeShowStatus="changeShowStatus" :keyType="keyType" :user-id="userId" />
    <div class="item-three" style="display: flex; justify-content: center" v-if="status">
        <div style="width: 15%; text-align: center">
            <div>
                <span style="font-size: 25px"> {{ maxInfo }}</span>
                <span style="color: #aa9db6">℃</span>
            </div>
            <div style="color: #aa9db6">最高体温</div>
        </div>
        <div style="width: 15%; text-align: center">
            <div>
                <span style="font-size: 25px"> {{ minInfo }}</span>
                <span style="color: #aa9db6">℃</span>
            </div>
            <div style="color: #aa9db6">最低体温</div>
        </div>
        <div style="width: 15%; text-align: center">
            <div>
                <span style="font-size: 25px">{{ middleInfo }}</span>
                <span style="color: #aa9db6">℃</span>
            </div>
            <div style="color: #aa9db6">平均体温</div>
        </div>
    </div>

    <div v-if="status" ref="chartRef" style="min-height: 300px; width: 100%"></div>

    <BasicTable v-else :key="refresh" :columns="temperatureColumns" :api="queryBodyTemperatureStatPageApi" :api-params="apiParams" />
</template>
<script setup lang="ts">
    import PublicTitle from '/@/components/secondaryScreen/secondMap/components/userInfoModal/publicTitle.vue';
    import { nextTick, onMounted, ref } from 'vue';
    import * as echarts from 'echarts';
    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
    import { queryBodyTemperatureStatApi, queryBodyTemperatureStatPageApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
    import { propTypes } from '/@/utils/propTypes';
    import dayjs from 'dayjs';
    import { message } from 'ant-design-vue';
    import { temperatureColumns } from '/@/components/secondaryScreen/secondMap/components/userInfoModal/tableColumns.ts';
    import { useChangeTable } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';

    const type = ref(1);
    const status = ref<boolean>(true);
    const value = ref(dayjs(new Date()).format('YYYY-MM-DD'));
    const maxInfo = ref();
    const middleInfo = ref();
    const minInfo = ref();

    const props = defineProps({
        userId: propTypes.string.def(''),
        keyType: propTypes.string.def('5'),
    });
    const { refresh, setRefresh } = useChangeTable();
    const apiParams = ref({
        flag: 0,
        userId: props.userId,
        pageSize: 10,
        pageNo: 1,
    });

    function tableReload() {
        apiParams.value = {
            flag: 0,
            userId: props.userId,
            pageSize: 10,
            pageNo: 1,
        };
        setRefresh();
    }

    let echart = null;

    function changeV(j: any) {
        type.value = j.type;
        value.value = j.value;
        initF();
    }

    function initF() {
        if (status.value) {
            echart && echart.clear();
            initEchart('0');
        } else {
            tableReload();
        }
    }

    function changeShowStatus(s: boolean) {
        status.value = s;
        if (s) {
            nextTick(() => {
                initEchart('0');
            });
        }
    }

    const chartRef = ref();

    /**
     *  @type 传入 type = '1' 则不需要要渲染图表
     * */
    async function initEchart(type) {
        try {
            const { code, result, message: msg } = await queryBodyTemperatureStatApi(getParams());
            if (code === 200) {
                let xArr = [];
                let yArr = [];
                let yArr1 = [];
                maxInfo.value = result.maxValueB ? result.maxValueB : '/';
                middleInfo.value = result.avgValueB ? result.avgValueB : '/';
                minInfo.value = result.minValueB ? result.minValueB : '/';
                if (type === '1') return;
                result.viewDataList.map((item) => {
                    xArr.push(item.date);
                    yArr.push(item.ydata1 ? item.ydata1 : 0);
                    yArr1.push(item.ydata2 ? item.ydata2 : 0);
                });
                echart = echarts.init(chartRef.value);
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        textStyle: {
                            color: '#fff',
                        },
                        backgroundColor: 'rgba(50,50,50,0.7)',
                        borderColor: '#1b7ef2',
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: xArr,
                            axisLabel: {
                                color: '#fff',
                            },
                        },
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '温度',
                            nameTextStyle: {
                                color: '#fff',
                            },
                            axisLabel: {
                                color: '#fff',
                            },
                        },
                    ],
                    series: [
                        {
                            name: '体温',
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' ℃';
                                },
                            },
                            data: yArr,
                        },
                        {
                            name: '体表温度',
                            type: 'bar',
                            tooltip: {
                                valueFormatter: function (value) {
                                    return value + ' ℃';
                                },
                            },
                            data: yArr1,
                        },
                    ],
                };

                echart.setOption(option);
                window.addEventListener('resize', () => {
                    echart.resize();
                });
            } else {
                message.warn(msg);
            }
        } catch {}
    }

    function getParams() {
        let params = {
            flag: type.value,
            userId: props.userId,
        };
        switch (type.value) {
            case 1:
                params['dateDay'] = value.value;
                break;
            case 2:
                params['dateWeekStart'] = value.value.substring(0, value.value.indexOf('~') - 1);
                params['dateWeekEnd'] = value.value.substring(value.value.indexOf('~') + 2);
                break;
            case 3:
                params['dateMonth'] = value.value;
                break;
            case 4:
                params['dateYear'] = value.value;
                break;
        }
        return params;
    }

    onMounted(() => {
        initEchart('0');
    });
</script>
<style scoped lang="less"></style>